<template>
	<view>
		<!-- 顶部信息 -->
		<view class="topInfo" v-if="is_Search">
			<image :src="shopDetail.logo" mode="aspectFit"></image>
			<view class="info">
				<view class="name">{{shopDetail.market_name}}</view>
			</view>
		</view>
		<!-- Banner -->
		<view class="banners" v-if="is_Search">
			<swiper class="swiper" indicator-dots="true" indicator-color="rgba(250,250,250,0.61)" indicator-active-color="#FFFFFF"
			 autoplay="true" circular="true">
				<swiper-item v-for="(item,index) in bannerList" :key="index" class="swip_item">
					<view @click="gotoDetail(item.goods_id)">
						<image :src="item.images_url"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 选项卡 -->
		<view :class="['nav', isTop ? 'nav-top' : '']" v-if="is_Search">
			<view :class="index == navIndex ? 'navItem navItem_active' : 'navItem'" v-for="(item,index) in cateList" :key="index"
			 @click="changeNav(index)">{{ item.name }}</view>
		</view>
		<!-- 商品列表 -->
		<view class="goods">
			<navigator hover-class="fales" class="goods-item" v-for="(item,index) in goods" :key="index" :url="'goodDetail?unid='+item.unid">
				<view class="goods-item-img" :style="'background: url('+item.images_url+') 100% 100%; background-size: cover;'">
					<!-- <view class="goods-item-img"> -->
					<!-- <image :src="item.images_url"></image> -->
				</view>
				<view class="goods-item-info">
					<view class="goods-item-info-name">{{item.goods_name}}</view>
					<view class="goods-item-info-price"><span>{{item.score}}</span>积分+￥{{item.price}}</view>
				</view>
			</navigator>
			<uni-load-more v-if="goods.length >= 6" :status="status" :content-text="contentText" />
		</view>
		<!-- 底部 -->
		<my-bottom :buttomIndex="0"></my-bottom>
	</view>
</template>

<script>
	import myBottom from './components/bottom.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			myBottom,
			uniLoadMore
		},
		data() {
			return {
				market_id: '', //所属上级ID
				shopDetail: {}, //店铺详情信息
				bannerList: [], //店铺banner列表
				cateList: [], //店铺商品分类列表
				navIndex: 0, //当前分类索引
				goods: [], //当前分类商品列表
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: '没数据'
				},
				isTop: false, //是否触顶
				goods_name: '',
				is_Search: true
			}
		},
		onPageScroll: function(e) {
			if (e.scrollTop >= 216) {
				this.isTop = true;
			} else {
				this.isTop = false;
			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: 'car'
			})
		},
		onNavigationBarSearchInputChanged(e) {
			this.goods_name = e.text;
			if (this.goods_name == '') {
				this.is_Search = true;
				this.page = 1;
				this.reload = true;
				this.goods = [];
				this.getData('/mobile/goods/infos', 'goods'); // 获取店铺分类下商品列表
			}
		},
		onNavigationBarSearchInputConfirmed() {
			this.is_Search = false;
			this.page = 1;
			this.reload = true;
			this.goods = [];
			this.getData('/mobile/goods/search', 'goods_name'); // 获取店铺商品分类列表
		},
		onPullDownRefresh() {
			this.page = 1;
			this.reload = true;
			this.goods = [];
			this.getData('/mobile/goods/infos', 'goods'); // 获取店铺分类下商品列表
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				_this.getData('/mobile/goods/infos', 'goods'); // 获取店铺分类下商品列表
			}, 500);
		},
		onLoad(e) {
			this.market_id = e.market_id;
			// this.market_id = '5f647ab1d2a8d';
			if (e.market_id) {
				uni.setStorageSync('market_id', this.market_id);
			} else {
				this.market_id = uni.getStorageSync('market_id');
			}
			this.getData('/mobile/market/info', 'detail'); // 获取店铺详情信息
			this.getData('/mobile/banner/infos', 'banner'); // 获取店铺Banner列表
			this.getData('/mobile/cate/infos', 'cate'); // 获取店铺商品分类列表
		},
		methods: {
			getData(url, type) {
				var data = {
					market_id: this.market_id
				}
				if (type == 'goods') {
					data = {
						limit: 8,
						page: this.page,
						cate_id: this.cateList[this.navIndex].unid
					}
				}
				if (type == 'goods_name') {
					data = {
						limit: 8,
						page: this.page,
						goods_name: this.goods_name
					}
				}
				this.$sapi.apiPost('v1/' + this.market_id + url, data).then(res => {
					var list = res.data.data;
					if (type == 'goods') {
						list = res.data.data.list;
					}
					if (type == 'goods_name') {
						list = res.data.data.list;
					}
					if (res.data.code == 200 && ((type == 'detail') || (type != 'detail' && list.length > 0))) {
						switch (type) {
							case 'detail':
								this.shopDetail = list;
								break;
							case 'banner':
								this.bannerList = list;
								break;
							case 'cate':
								this.cateList = list;
								this.getData('/mobile/goods/infos', 'goods'); // 获取店铺分类下商品列表
								break;
							case 'goods':
								this.goods = this.reload ? list : this.goods.concat(list);
								this.reload = false;
								this.status = 'more';
								break;
							case 'goods_name':
								this.goods = this.reload ? list : this.goods.concat(list);
								this.reload = false;
								this.status = 'more';
								break;
						}
					} else {
						switch (type) {
							case 'detail':
								this.shopDetail = {};
								break;
							case 'banner':
								this.bannerList = [];
								break;
							case 'cate':
								this.cateList = [];
								break;
							case 'goods':
								if (this.reload) {
									this.goods = [];
								} else {
									this.status = 'noMore';
								}
								break;
						}
					}
				});
			},
			// 改变分类选项卡索引
			changeNav(index) {
				this.navIndex = index;
				this.page = 1;
				this.reload = true;
				this.goods = [];
				this.getData('/mobile/goods/infos', 'goods'); // 获取店铺分类下商品列表
			},
			// Banner图前往商品详情页
			gotoDetail(goodsId) {
				if (goodsId) {
					uni.navigateTo({
						url: 'goodDetail?unid=' + goodsId
					})
				} else {
					uni.showToast({
						title: '没有相关商品详情',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="less">
	// 顶部
	.topInfo {
		background-color: #FF9900;
		padding: 20upx 30upx 34upx;
		width: calc(100% - 60upx);
		display: flex;
		align-items: center;

		image {
			width: 88upx;
			height: 88upx;
			border-radius: 50%;
			background-color: #FFFFFF;
			margin-right: 12upx;
		}

		.info {
			color: #FFFFFF;

			.name {
				font-size: 30upx;
			}
		}
	}

	// Banner
	.banners {
		margin: 20upx 30upx 30upx;

		.swiper {
			height: 240upx;

			.swip_item view {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	// 选项卡
	.nav {
		padding: 0 30upx;
		display: flex;
		align-items: center;
		white-space: nowrap;
		overflow: auto;

		.navItem {
			position: relative;
			padding: 18upx 52upx 18upx 0;
			font-size: 32upx;
			color: #666666;
		}

		.navItem_active {
			color: #FF9900;
			font-size: 36upx;
			font-weight: bold;
		}
	}

	.nav-top {
		position: fixed;
		z-index: 9;
		width: 100%;
		background-color: #FFFFFF;
		box-shadow: 0 2upx 4upx rgba(0, 0, 0, .3);
		/* #ifdef APP-PLUS */
		top: 0upx;
		/* #endif */
		/* #ifdef H5 */
		top: 88upx;
		/* #endif */
	}

	// 商品列表
	.goods {
		margin: 30upx 30upx 100upx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;

		.goods-item {
			width: 48%;
			height: 560upx;

			.goods-item-img {
				height: 266upx;
				width: calc(100% - 40upx);
				padding: 50upx 20upx;
				border-radius: 20upx;
				border: 2upx solid #F0F0F0;

				image {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.goods-item-info {
				margin-top: 20upx;

				.goods-item-info-name {
					color: #333333;
					font-size: 26upx;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					word-break: break-all;
					word-wrap: break-word;
				}

				.goods-item-info-price {
					color: #FF0000;
					font-size: 20upx;

					span {
						font-size: 34upx;
						font-weight: 500;
						margin-right: 8upx;
					}
				}
			}
		}
	}

	.uni-load-more {
		width: 100%;
	}
</style>
